<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/webbase.css">
    <link rel="stylesheet" href="css/pages-weixinpay.css">

    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/include.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.19.0.js"></script>

    <!-- 获取地址栏参数 -->
    <script src="js/getParameter.js"></script>

    <!-- 二维码插件 -->
    <script type="text/javascript" src="js/qrcode.js"></script>
    <title>微信支付</title>

</head>
<body>
<header id="header"></header>
<div class="container-fluid" id="app">
    <div class="cart py-container">
        <!--主内容-->
        <div class="checkout py-container  pay">
            <div class="checkout-tit">
                <h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款！订单号：56789065645</span></h4>
                <span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥{{price}}</em>元</span>
                <div class="clearfix"></div>
            </div>
            <div class="checkout-steps">
                <div class="fl weixin">微信支付</div>
                <div class="fl sao">
                    <div class="fl code" id="code">
                        <!--<img src="img/erweima.png" alt="">-->
                    </div>

                    <div class="fl" style="background:url(./img/phone-bg.png) no-repeat;width:350px;height:400px;margin-left:40px"></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>

    </div>
</div>
<!--引入尾部-->
<footer id="footer"></footer>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            price:'',
            userId:'',
            url:'',
        },
        methods:{

            timeout(){
                this.timer=setTimeout(()=>{
                    location.href=`/pay_fail.html?userId=${this.userId}`
                },60*2*1000)
            },
            afterpay(){
                this.timer=setInterval(()=>{
                    axios.post("/pay/findstate",{"userId":this.userId}).then(rsp=>{
                        console.log(this.userId)
                        if(rsp.data.success){
                            location.href=`/paysuccess.html`
                        }
                    })
                },5000)
            },
            pay(userId,price){
                this.price=price;
                this.userId=userId;
                axios.post("/pay/getCode",{"userId":userId}).then(rsp=>{
                    this.url=rsp.data
                    new QRCode("code",this.url);
                    this.timeout()
                    this.afterpay()
                })
            },

        },
        created(){
            let userId = getParameter("userId");
            alert(userId);
            this.pay(userId,1)
        }
    })
</script>

</html>
